import { useAppDispatch } from '@/store'
import React, { memo, useEffect } from 'react'
import type { ReactNode } from 'react'
import {
  fetchRankingDataAction,
  // fetchBannerDataAction,
  // fetchNewAlbgumAction,
  fetchRecommendDataAction
} from './store/recommend'
import TopBanner from './c-cpns/top-banner'
import HotRecommend from './c-cpns/hot-recommend'

import {
  RecommendWrapper,
  RecommendSection,
  RecommendLeft,
  RecommendRight
} from './style'
import NewAlbum from './c-cpns/new-album'
import UserLogin from './c-cpns/user-login'

interface IProps {
  children?: ReactNode
}

const Recommend: React.FC<IProps> = (props) => {
  const dispatch = useAppDispatch()
  useEffect(() => {
    // 发起 action 获取轮播图、热门推荐、新碟上架数据
    // dispatch(fetchBannerDataAction())
    // // 发起 action 获取热门推荐数据
    // dispatch(fetchRecommendDataAction())
    // // 发起 action 获取新碟上架数据
    // dispatch(fetchNewAlbgumAction())
    dispatch(fetchRecommendDataAction())

    // 获取三个榜单的数据
    dispatch(fetchRankingDataAction())
  }, [])

  // jsx render函数的返回jsx
  return (
    <RecommendWrapper>
      {/* 轮播图 */}
      <TopBanner />
      {/* 内容区 */}
      <RecommendSection className="wrap-v2">
        {/* 左侧 */}
        <RecommendLeft>
          {/* 热门推荐 */}
          <HotRecommend />
          {/* 新碟上架 */}
          <NewAlbum />
        </RecommendLeft>
        {/* 右侧 */}
        <RecommendRight>
          {/* 登录组件 */}
          <UserLogin />
        </RecommendRight>
      </RecommendSection>
    </RecommendWrapper>
  )
}

export default memo(Recommend)
